<template>
  <div class="flex flex-col md:flex-row py-6 gap-x-6 gap-y-6 items-start tool-item tool-dom"
    :data-handle="tool.handle"
    :data-advertisement_id="tool.advertisement_id ? tool.advertisement_id : ''"
    :data-position="toolPosition"
    :data-index="toolPosIndex">
    <common-link path="/tool/:handle"
      @click.native="handleExp(0, tool)"
      target="_blank"
      :params="{ handle: tool.handle}"
      class="flex tool-pic items-start justify-center h-36 w-full md:w-56 skeleton-bg rounded-md overflow-hidden go-tool"
      :title="toolName"
      ref="imgBox">
      <common-image class="w-full h-full flex-shrink-0"
        :src="tool.image"
        :alt="toolName"></common-image>
    </common-link>
    <div class="md:flex-1">
      <div class="flex items-center justify-between">
        <div class="block flex-1 w-0 fs0">
          <div class="relative fs0 inline-block max-w-full">
            <h3 class="max-w-full inline-block go-tool-detail-name">
              <common-link path="/tool/:handle"
                @click.native="handleExp(1, tool)"
                target="_blank"
                :params="{ handle: tool.handle}"
                :title="toolName"
                class="text-2xl font-semibold text-gray-1000 block max-w-full flex-1 truncate break-words hover:text-purple-1300 go-tool">
                {{toolName}}
              </common-link>
            </h3>
          </div>
        </div>
      </div>
      <div class="text-base text-gray-1000 break-words mt-3 pb-3"
        v-if="hasRealVal(tool.tool_website) && hasRealVal(tool.tool_website.what_is)">
        {{tool.tool_website.what_is}}
      </div>
      <div :title="tool.description"
        v-else
        class="mt-2 text-base text-gray-1000 break-words tool-desc leading-7 go-tool-detail-description">
        {{tool.description}}
      </div>
      <div class="flex items-center flex-wrap flex-shrink-0 mt-2.5 gap-x-3 gap-y-3 h-8 overflow-hidden"
        v-if="tool.categories && tool.categories.length >0">
        <p class="text-base text-purple-1700 border border-purple-1500 bg-purple-1600 max-w-max truncate rounded-2xl t-label go-category-link"
          v-for="(tItem, tKey) in tool.categories"
          :key="tKey">{{tItem.name}}</p>
      </div>
    </div>
    <div class="md:ml-5 md:mt-12 w-full md:w-auto flex-shrink-0">
      <common-link path="/tool/:handle"
        @click.native="handleExp(2, tool)"
        target="_blank"
        :params="{ handle: tool.handle}"
        :title="toolName"
        class="min-w-24 md:1.5 h-9 flex items-center justify-center px-4 text-base text-white bg-purple-1300 rounded hover:opacity-90">
        {{$t('category_tryIt')}}
      </common-link>
    </div>
  </div>
</template>

<script>
import mixinsExposure from '~/mixins/mixins-exposure'
import _ from 'lodash'
import { mapState, mapActions } from 'vuex'
export default {
  name: 'NewestToolItem',
  computed: {
    ...mapState({
      locale: (state) => state.locale,
    }),
    toolName() {
      return this.$websiteName(this.tool)
    },
  },
  props: {
    toolData: {
      type: Object,
      default: {},
    },
    toolPosIndex: {
      type: Number,
      default: 1,
    },
    toolPosition: {
      type: String,
      default: '',
    },
  },
  watch: {
    toolData: {
      handler() {
        this.tool = JSON.parse(JSON.stringify(this.toolData))
      },
      deep: true,
      immediate: true,
    },
  },
  mixins: [mixinsExposure],
  data() {
    return {
      loading: false,
      tool: {},
    }
  },
  filters: {
    vReset: function (val) {
      if (typeof val === 'number' && !isNaN(val)) {
        if (val <= 1000) {
          return val
        } else if (val > 1000 && val < 1000000) {
          return (val / 1000).toFixed(1) + 'K'
        } else if (val >= 1000000 && val < 1000000000) {
          return (val / 1000000).toFixed(1) + 'M'
        } else {
          return (val / 1000000000).toFixed(1) + 'B'
        }
      } else {
        return val ? val : 0
      }
    },
    vResetVisit: function (val) {
      if (typeof val === 'number' && !isNaN(val)) {
        if (val < 5000) {
          return '< 5K'
        } else if (val >= 5000 && val < 1000000) {
          return (val / 1000).toFixed(1) + 'K'
        } else if (val >= 1000000 && val < 1000000000) {
          return (val / 1000000).toFixed(1) + 'M'
        } else {
          return (val / 1000000000).toFixed(1) + 'B'
        }
      } else {
        return '< 5K'
      }
    },
  },
  methods: {
    ...mapActions(['exposure']),
    getLocaleText(val, val_locales) {
      if (
        Object.prototype.toString.call(val_locales) === '[object Object]' &&
        typeof val_locales[this.locale] != 'undefined' &&
        val_locales[this.locale] !== null &&
        val_locales[this.locale] !== ''
      ) {
        return val_locales[this.locale]
      } else {
        return val
      }
    },

    handleExp(key = 0, toolsData) {
      this.getThrottledClickFunction(toolsData, key)()
    },
    getThrottledClickFunction(toolsData, key) {
      let functionKey = `${toolsData.handle}-${key}`
      if (!this.throttledClickFunctions[functionKey]) {
        this.throttledClickFunctions[functionKey] = _.throttle(() => {
          let exporeData = this.getExporeData(
            toolsData,
            this.toolPosition,
            this.toolPosIndex,
            false
          )
          this.exposure({
            ...exporeData,
          })
        }, 2000) // 设置节流时间间隔
      }
      return this.throttledClickFunctions[functionKey]
    },
  },
}
</script>
<style lang='scss' scoped>
.tool-item {
  .t-label {
    padding: 3px 10px;
  }
  .tool-desc {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .maxHeight {
    max-height: 76px;
  }

  & + .tool-item {
    border-top: 1px solid #e5e5e5;
  }
}
</style>
